<template>
    <div class="w-full h-full p-4 bg-white">
        <div class="w-full">
            <h2 class="text-xl font-bold mb-6">账号绑定</h2>

            <!-- 支付宝绑定卡片 -->
            <div class="border rounded-lg p-6 mb-4 hover:shadow-md transition-shadow">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <i class="iconfont icon-alipay text-2xl text-blue-500 mr-3"></i>
                        <div>
                            <h3 class="text-base font-medium">支付宝账号</h3>
                            <p class="text-gray-500 text-sm mt-1" v-if="form.alipay">
                                <span class="mr-2">{{ maskAccount(form.alipay) }}</span>
                                <el-tag size="small" type="success">已绑定</el-tag>
                            </p>
                            <p class="text-gray-500 text-sm mt-1" v-else>未绑定支付宝账号</p>
                        </div>
                    </div>
                    <div class="space-x-2">
                        <el-button v-if="form.alipay" type="danger" plain size="small" @click="unbindAccount('alipay')">
                            解绑
                        </el-button>
                        <el-button type="primary" size="small" @click="showAlipayDialog = true">
                            {{ form.alipay ? '修改' : '绑定' }}
                        </el-button>
                    </div>
                </div>
            </div>

            <!-- Steam绑定卡片 -->
            <div class="border rounded-lg p-6 mb-4 hover:shadow-md transition-shadow">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <i class="iconfont icon-steam text-2xl text-gray-700 mr-3"></i>
                        <div>
                            <h3 class="text-base font-medium">Steam账号</h3>
                            <p class="text-gray-500 text-sm mt-1" v-if="form.steamAccount">
                                <span class="mr-2">{{ maskAccount(form.steamAccount) }}</span>
                                <el-tag size="small" type="success">已绑定</el-tag>
                            </p>
                            <p class="text-gray-500 text-sm mt-1" v-else>未绑定Steam账号</p>
                        </div>
                    </div>
                    <div class="space-x-2">
                        <el-button v-if="form.steamAccount" type="danger" plain size="small"
                            @click="unbindAccount('steam')">
                            解绑
                        </el-button>
                        <el-button type="primary" size="small" @click="showSteamDialog = true">
                            {{ form.steamAccount ? '修改' : '绑定' }}
                        </el-button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 支付宝绑定弹窗 -->
        <el-dialog v-model="showAlipayDialog" :title="form.alipay ? '修改支付宝账号' : '绑定支付宝账号'" width="400px"
            @close="resetForm('alipay')">
            <el-form :model="alipayForm" :rules="alipayRules" ref="alipayFormRef" label-width="100px">
                <el-form-item label="支付宝账号" prop="account">
                    <el-input v-model="alipayForm.account" placeholder="请输入支付宝账号">
                        <template #prefix>
                            <i class="iconfont icon-alipay"></i>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="showAlipayDialog = false">取消</el-button>
                <el-button type="primary" @click="bindAlipay">确认</el-button>
            </template>
        </el-dialog>

        <!-- Steam绑定弹窗 -->
        <el-dialog v-model="showSteamDialog" :title="form.steamAccount ? '修改Steam账号' : '绑定Steam账号'" width="400px"
            @close="resetForm('steam')">
            <el-form :model="steamForm" :rules="steamRules" ref="steamFormRef" label-width="100px">
                <el-form-item label="Steam账号" prop="account">
                    <el-input v-model="steamForm.account" placeholder="请输入Steam账号">
                        <template #prefix>
                            <i class="iconfont icon-steam"></i>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="steamForm.password" type="password" placeholder="请输入Steam密码" show-password />
                </el-form-item>
                <el-form-item label="令牌码" prop="token">
                    <el-input v-model="steamForm.token" placeholder="请输入Steam令牌码" maxlength="5" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="showSteamDialog = false">取消</el-button>
                <el-button type="primary" @click="bindSteam">确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
// 表单数据
const form = reactive({
    alipay: '',
    steamAccount: ''
})

// 弹窗显示控制
const showAlipayDialog = ref(false)
const showSteamDialog = ref(false)

// 表单引用
const alipayFormRef = ref<FormInstance>()
const steamFormRef = ref<FormInstance>()

// 支付宝表单
const alipayForm = reactive({
    account: ''
})

// Steam表单
const steamForm = reactive({
    account: '',
    password: '',
    token: ''
})

// 支付宝表单验证规则
const alipayRules = {
    account: [
        { required: true, message: '请输入支付宝账号', trigger: 'blur' },
        { min: 4, message: '账号长度不能小于4位', trigger: 'blur' }
    ]
}

// Steam表单验证规则
const steamRules = {
    account: [
        { required: true, message: '请输入Steam账号', trigger: 'blur' },
        { min: 4, message: '账号长度不能小于4位', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入Steam密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
    ],
    token: [
        { required: true, message: '请输入令牌码', trigger: 'blur' },
        { len: 5, message: '令牌码长度必须为5位', trigger: 'blur' }
    ]
}

// 账号脱敏显示
const maskAccount = (account: string) => {
    if (account.length <= 4) return account
    return `${account.slice(0, 3)}****${account.slice(-4)}`
}

// 重置表单
const resetForm = (type: 'alipay' | 'steam') => {
    if (type === 'alipay') {
        alipayFormRef.value?.resetFields()
    } else {
        steamFormRef.value?.resetFields()
    }
}

// 解绑账号
const unbindAccount = async (type: 'alipay' | 'steam') => {
    try {
        await ElMessageBox.confirm(
            `确定要解绑${type === 'alipay' ? '支付宝' : 'Steam'}账号吗？`,
            '提示',
            {
                type: 'warning',
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }
        )
        // 调用解绑 API
        // await unbindAccountAPI(type)
        if (type === 'alipay') {
            form.alipay = ''
        } else {
            form.steamAccount = ''
        }
        ElMessage.success('解绑成功')
    } catch (error) {
        if (error !== 'cancel') {
            ElMessage.error('解绑失败')
        }
    }
}

// 绑定支付宝账号
const bindAlipay = async () => {
    if (!alipayFormRef.value) return
    try {
        await alipayFormRef.value.validate()
        // 调用支付宝绑定API
        // await bindAlipayAPI(alipayForm)
        form.alipay = alipayForm.account
        showAlipayDialog.value = false
        ElMessage.success('绑定成功')
        resetForm('alipay')
    } catch (error) {
        ElMessage.error('绑定失败')
    }
}

// 绑定Steam账号
const bindSteam = async () => {
    if (!steamFormRef.value) return
    try {
        await steamFormRef.value.validate()
        // 调用Steam绑定API
        // await bindSteamAPI(steamForm)
        form.steamAccount = steamForm.account
        showSteamDialog.value = false
        ElMessage.success('绑定成功')
        resetForm('steam')
    } catch (error) {
        ElMessage.error('绑定失败')
    }
}
</script>

<style scoped></style>